<template>
  <div class="search-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="用户ID：" label-width="80px">
        <el-input
            v-model="shenfen.yhid"
            placeholder="请输入用户ID"
            style="width: 200px"
            clearable
        />
      </el-form-item>

      <el-form-item class="button-group">
        <el-button type="primary" @click="doList" icon="Search">查询</el-button>
        <el-button @click="reset" icon="RefreshRight">重置</el-button>
        <el-button type="success" @click="showAddDialog" icon="Plus">新增用户</el-button>
      </el-form-item>
    </el-form>
  </div>

  <el-table
      stripe
      border
      highlight-current-row
      :data="shenFenList"
      style="width: 100%"
      :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
      empty-text="暂无数据"
  >
    <el-table-column prop="yhid" label="用户ID" width="120" align="center"/>
    <el-table-column prop="yhzh" label="用户账号" min-width="150"/>
    <el-table-column prop="yhsf" label="用户身份" width="150" align="center">
      <template #default="scope">
        <el-tag
            :type="tagTypeMap[scope.row.yhsf]"
            effect="dark"
            round
        >
          {{ roleMap[scope.row.yhsf] || '未知身份' }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="yhnc" label="用户名称" min-width="150"/>
    <el-table-column prop="zcsj" label="注册时间" min-width="180"/>
    <el-table-column prop="phone" label="手机号" min-width="180"/>
    <el-table-column label="操作" width="220" align="center">
      <template #default="scope">
        <el-button type="primary" size="small" icon="Edit" @click="showUpdateDialog(scope.row)"/>
        <el-button type="danger" size="small" icon="Delete" @click="doDelete(scope.row)"/>
      </template>
    </el-table-column>
  </el-table>



  <!-- 新增 dialog-->
  <el-dialog v-model="addDialogVisible" title="新增用户" width="40%" top="2vh" destroy-on-close>
    <add-shen-fen
        @flushPage="reset"
        @closeDialog="addDialogVisible = false">
    </add-shen-fen>
  </el-dialog>

  <!-- 更新 dialog-->
  <el-dialog v-model="updateDialogVisible" title="更新用户" width="40%" top="2vh" destroy-on-close>
    <update-shen-fen ref="updatePageRef"
                 @flushPage="reset"
                 @closeDialog="updateDialogVisible = false">
    </update-shen-fen>
  </el-dialog>
</template>

<script setup >
import {nextTick, onMounted, reactive, ref} from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";
import AddShenFen from "./AddShenFen.vue";
import UpdateShenFen from "./UpdateShenFen.vue";
const shenfen = reactive({
  yhid: '',
})
const shenFenList = ref()

onMounted(() =>{
  doList();
})

const doList = async () => {
  shenFenList.value = [];
  const url = shenfen.yhid ? `/api/shenfen/${shenfen.yhid}` : '/api/shenfen';
  const {data} = await axios.get(url)
  if(data.code === 200){
    shenFenList.value = shenfen.yhid
        ? [data.data]
        : data.data;
    ElMessage.success('查询成功');
  }else{
    ElMessage.error(data.message);
  }
}


const reset = () => {
  shenfen.yhid = '';
  doList();
}

const addDialogVisible = ref(false)
const showAddDialog = () => {
  addDialogVisible.value = true;
}

const updateDialogVisible = ref(false)
const updatePageRef = ref();
const showUpdateDialog = (row) => {
  updateDialogVisible.value = true;
  nextTick(()=>{
    updatePageRef.value.handleUpdateData(row);
  })
}

const doDelete = async (row) => {

  const {data} = await axios.delete(`/api/shenfen/${row.yhid}`)
  console.log(data);
  if(data.code === 200){
    ElMessage.success('删除成功');
    await doList();
  }else{
    ElMessage.error(data.message);
  }
}
const roleMap = {
  '0': '管理员',
  '3': '普通用户',
  '6': '商家',
  '9': '骑手'
}

const tagTypeMap = {
  '0': 'success',
  '3': 'info',
  '6': 'warning',
  '9': 'danger'
}

// 新增分页相关逻辑
const total = ref(0)
const currentPage = ref(1)

const handlePageChange = (page) => {
  currentPage.value = page
  doList()
}
</script>
<style scoped>
.search-container {
  padding: 20px;
  background: #fff;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.button-group {
  margin-left: 20px;
}

.el-button + .el-button {
  margin-left: 12px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.el-table) {
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

:deep(.el-table__header) th {
  font-weight: 600;
}

:deep(.el-table__row) {
  transition: all 0.3s;
}

:deep(.el-table__row:hover) {
  transform: translateY(-2px);
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
}
</style>
